
import { Map, APILoader, Marker, GeolocationControl, Control } from "@uiw/react-baidu-map";
import { useState } from "react";
import { getGravity, Point } from "../MyMap/MyMap";
import { Button } from "@material-ui/core"
import { useHistory } from "react-router-dom";
export interface PositionInfo {
    point: Point,
    title: string,
    count: number,
    limit: number,
}
export const points = [{
    point: {
        lng: 103.983219,
        lat: 30.776383,
    },
    title: '中通快递（季柳园）',
    count: 375,
    limit: 1,

}, {
    point: {
        lng: 103.983484,
        lat: 30.776446,
    },
    title: '菜鸟驿站（季柳园）',
    count: 1000,
    limit: 1,

}, {
    point: {
        lng: 103.984149,
        lat: 30.762955,
    },
    title: '菜鸟驿站（双铁广场）',
    count: 500,
    limit: 1,

}, {
    point: {
        lng: 103.984355,
        lat: 30.763157,
    },

    title: '韵达快递（双铁广场）',
    count: 300,
    limit: 1,

}, {
    point: {
        lng: 103.990158,
        lat: 30.762176,
    },
    title: '菜鸟驿站（卡布里城）',
    count: 750,
    limit: 1,

}, {
    point: {
        lng: 104.000925, //104.000925,30.763906
        lat: 30.763906,
    },
    title: '百世快递（林湾村）',
    count: 650,
    limit: 1,

}, {
    point: {
        lng: 104.00057,  //104.00057,30.764255	700
        lat: 30.764255,
    },
    title: '中通快递（林湾村）',
    count: 700,
    limit: 1,

}, {
    point: {
        lng: 104.001742, //韵达快递（林湾村）	104.001742,30.765547	700
        lat: 30.765547,
    },
    title: '韵达快递（林湾村）',
    count: 700,
    limit: 1,

}, {
    point: {
        lng: 103.991519, //中国邮政（交大南区）	103.991519,30.764189	600
        lat: 30.764189,
    },
    title: '中国邮政（交大南区）',
    count: 600,
    limit: 1,

}, {
    point: {
        lng: 103.99001, // 中通快递（交大南区）	103.99001,30.766043	2500
        lat: 30.766043,
    },
    title: '中通快递（交大南区）',
    count: 2500,
    limit: 1,

}, {
    point: {
        lng: 103.989166, // 顺丰快递（交大南区）	103.989166,30.766997	700
        lat: 30.766997,
    },
    title: '顺丰快递（交大南区）',
    count: 700,
    limit: 1,

}, {
    point: {
        lng: 103.989516, //菜鸟驿站（交大南区）	103.989516,30.766392	2500
        lat: 30.766392,
    },
    title: '菜鸟驿站（交大南区）',
    count: 2500,
    limit: 1,

}, {
    point: {
        lng: 103.989417, //天天快递（交大南区）	103.989417,30.766671	750
        lat: 30.766671,
    },
    title: '天天快递（交大南区）',
    count: 750,
    limit: 1,

}, {
    point: {
        lng: 103.98502, //菜鸟驿站（交大北区）	103.98502,30.772098	3500
        lat: 30.772098,
    },
    title: '菜鸟驿站（交大北区）',
    count: 3500,
    limit: 1,

}, {
    point: {
        lng: 103.98515, //京东派（交大北区）	103.98515,30.77273	450
        lat: 30.77273,
    },
    title: '京东派（交大北区）',
    count: 450,
    limit: 1,

}, {
    point: {
        lng: 103.98427, //百世快递（交大北区）	103.98427,30.773056	1000
        lat: 30.773056,
    },
    title: '百世快递（交大北区）',
    count: 1000,
    limit: 1,

}, {
    point: {
        lng: 103.982572,
        lat: 30.765849,
    },
    title: '韵达快递（石溪里）',
    count: 500,
    limit: 1,

}, {
    point: {
        lng: 103.986062,
        lat: 30.759383,
    },
    title: '菜鸟驿站（万科理想城）',
    count: 450,
    limit: 1,

}, {
    point: {
        lng: 103.99805,
        lat: 30.75962,
    },
    title: '菜鸟驿站（傲城）',
    count: 600,
    limit: 1,

}, {
    point: {
        lng: 103.993091,
        lat: 30.776701,
    },
    title: '菜鸟驿站（学府名城）',
    count: 800,
    limit: 1,

}]
export const centerPoint = getGravity(points.map(x => x.point));
export function Info() {
    const [selected, setSelected] = useState(undefined as number | undefined);
    const handelOpenInfoWindow = (i: number) => {
        setSelected(i);
    }
    const handleCloseInfoWindow = () => {
        // setSelected(undefined);
        console.log();

    }
    const history = useHistory()
    return <div className="MyMap">
        <div
            style={{ minWidth: '220px', borderRadius: '10px', opacity: 0.8, background: 'gray', padding: '10px', fontSize: 20, color: '#ffff', display: 'inline-block', zIndex: 40, position: 'absolute', right: '0px' }}
        >
            {selected !== undefined && <div style={{ textAlign: 'center' }}>
                <h3> {points[selected].title} </h3>
                <div>
                    <Button variant="contained" style={{ margin: '2px' }} color="primary" >编辑</Button>
                    <Button variant="contained" style={{ margin: '2px' }} color="primary" >删除</Button>
                </div>
                <div>{'包裹量:' + points[selected].count}</div>
                <div>{'弹性阈值: ' + points[selected].limit}</div>

            </div>

            }
        </div>
        <div style={{ zIndex: 40, padding:'12px',position: 'absolute', left:'50%', right: '50%' , margin: 'auto' }}>
            <Button color="primary" variant='contained'>添加</Button>
        </div>  
        <div style={{ position: 'absolute' }} className="MyMap">
            <APILoader akay="GzlPHk1eLYhZhLz6fs4ebQnNOPU9mzG6">
                <Map enableMapClick={false} onClick={() => handleCloseInfoWindow()}  enableScrollWheelZoom center={centerPoint}>
                    <GeolocationControl />

                    {

                        points.map((element, i) => <Marker key={i} onClick={() => handelOpenInfoWindow(i)} position={element.point} type="loc_red"></Marker>)
                    }

                    <Control anchor={0}>
                        <Button variant="contained" color="secondary" onClick={() => history.goBack()}>←</Button>
                    </Control>
                </Map>
            </APILoader>
        </div>
    </div >
}
